<template>
	<view class="tabs">
		
		<!-- 一级分类 -->
		<scroll-view scroll-x="true" :show-scrollbar="false" class="scroll-h" :scroll-into-view="scrollInto" style="background-color: #0e0d17;">
			<view class="uni-tab-item" v-for="(tab, index) in tabBars" :key="tab.pinyin" @tap="ontabtap" :data-current="index" :id="tab.pinyin">
				<view class="uni-flex uni-column">
					<view class="uni-flex" style="margin-top: 10upx;justify-content: center;">
						<img :src="tab.icon" alt="" style="width: 50upx;height: 50upx;">
					</view>
					<view class="">
						<text class="uni-tab-item-title" :class="tabIndex == index ? 'uni-tab-item-title-active' : ''">{{tab.name}}</text>
					</view>
				</view>
			</view>
		</scroll-view>
		
		<view class="cu-card case">
			<view class="cu-item shadow">
				
				<!-- 二级分类 -->
				<scroll-view scroll-x="true" :show-scrollbar="false" class="scroll-h" :scroll-into-view="childScrollInto">
					<view class="uni-tab-item" v-for="(childTab, childIndex1) in childTabBars" :key="childTab.pinyin" @tap="childOntabtap" :data-current="childIndex1" :id="childTab.pinyin">
						<view class="uni-flex uni-column">
							<view class="uni-flex" style="margin-top: 10upx;justify-content: center;">
								<img :src="childTab.icon" alt="" style="width: 50upx;height: 50upx;">
							</view>
							<view class="">
								<text class="uni-tab-item-title-child" :class="childTarbIndex == childIndex1 ? 'uni-tab-item-title-active' : ''">{{childTab.name}}</text>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		
		<view class="cu-card case">
			<view class="cu-item shadow">
				<!-- 维修内容详情 -->
				<swiper class="uni-swiper-customization" :current="swiperIndex" :indicator-dots="false" style="flex: 1;height: 300upx;margin-top: 30upx;" :duration="300" @change="ontabchange">
					<swiper-item v-for="(tab, index1) in swipTabBars" :key="index1">
						<view class="uni-flex uni-row" style="height: 100%;justify-content: center;align-items: center;">
							<view>
								<image style="width: 100upx;height: 100upx;padding: 20upx;" :src="tab.icon" mode=""></image>
							</view>
							<view class="uni-flex uni-column" style="padding: 10upx;">
								<view>维修类别: {{tab.name}}</view>
								<view>维修描述: {{tab.descripion}}</view>
								<view>维修价格: {{tab.descripion}}</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
	
	</view>
</template>

<script>
	
	import {
        mapMutations
    } from 'vuex'
	
	
	export default{
		watch:{
			parentIndex: function(val){
				this.childTabBars = this.tabBars[val].categoryList
			},
		},
		data(){
			return{
				targetBar: '1', //现在是一级分类还是二级分类
				tabBars:[],//一级分类数组
				tabIndex: 0,//一级分类数组点击索引
				scrollInto: "",//跳转的拼音id
				parentIndex: "",//一级分类点击的索引 = tabIndex
				childTabBars: [],//二级分类数组
				childTarbIndex: 9999,//二级分类数组索引
				childScrollInto: "",//二级分类跳转,
				swiperIndex: 0,
				swipTabBars: [],
			}
		},
		onReady() {
			// 初始化数据
			this.initBar()
		},
		methods:{
			...mapMutations(['setServiceId', 'setServiceFee']),
			initBar(){
				//一级分类数组
				this.tabBars = uni.getStorageSync("tabBars");
				if(this.tabBars && this.tabBars[0]){
					//二级分类数组
					this.childTabBars = this.tabBars[0].categoryList
					//swipper内容为一级分类
					this.swipTabBars = this.tabBars
					// 将选择的id放入vuex的order中
					this.setServiceId(this.tabBars[0].id)
					this.setServiceFee(this.tabBars[0].amount)
				}
			},
			ontabchange(e){
				let index = e.detail.current
				if(this.targetBar === '1'){
					this.switchTab(index)
				}else{
					this.switchChildTab(index)
				}
			},
			switchTab(index){
				if(this.tarbIndex != index){
					this.tabIndex = index
					this.swipTabBars = this.tabBars
					this.swiperIndex = this.tabIndex
					this.targetBar = '1'
					this.childTabBars = this.tabBars[index].categoryList
				}
				this.scrollInto = this.tabBars[index].pinyin;
				this.setServiceId(this.tabBars[index].id)
				this.setServiceFee(this.tabBars[index].amount)
			},
			ontabtap(e){
				let index = e.target.dataset.current || e.currentTarget.dataset.current;
				this.switchTab(index)
				this.parentIndex = index
			},
			childOntabtap(e){
				let index = e.target.dataset.current || e.currentTarget.dataset.current;
				this.switchChildTab(index)
			},
			switchChildTab(index){
				if(this.childTarbIndex != index){
					this.childTarbIndex = index
					this.swipTabBars = this.childTabBars
					this.swiperIndex = this.childTarbIndex
					this.targetBar = '0'
				}
				this.childScrollInto = this.childTabBars[index] ? this.childTabBars[index].pinyin : '';
				this.setServiceId(this.childTabBars[index].id)
				this.setServiceFee(this.childTabBars[index].amount)
			}
		}
	}
</script>

<style>
	.tabs{
		flex: 1;
		flex-direction: column;
		overflow: hidden;
		background-color: #FFFFFF;
		height: 48vh;
		background-color: #F2F2F2;
	}
	
	.scroll-h{
		height: 110upx;
		width: 750upx;
		flex-direction: row;
		white-space: nowrap;
	}
	
	.uni-tab-item-title{
		color: white;
		font-size: 30upx;
		height: 110upx;
		/* line-height: 130upx; */
		flex-wrap: nowrap;
		white-space: nowrap;
	}
	
	.uni-tab-item-title-child{
		color: black;
		font-size: 30upx;
		height: 110upx;
		/* line-height: 130upx; */
		flex-wrap: nowrap;
		white-space: nowrap;
	}
	
	.uni-tab-item-title-active {
        color: #ff7c00;
    }
	
	.uni-tab-item{
		display: inline-block;
		flex-wrap: nowrap;
		padding: 0upx 34upx;
	}
	
	.uni-swiper-customization{
		margin: 10upx;
		padding: 10upx;
	}
	
	.line-h {
        height: 1upx;
        background-color: #cccccc;
    }

	
</style>